<template>
    <div>
        <headerView class="box"></headerView>
        <div class="set_box">
            <div class="set_information">
                <h3>重置密码</h3>
                <p>
                    请输入<span>{{number}}</span>收到的短信验证码，以完成
                    身份验证~
                </p>
            </div>
            <div class="captcha">
                <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码" @input="getSms">
                    <template #button>
                        <van-button round plain color="#ff6357" size="small" type="primary" @click="sendCode">
                            <span v-if="isShow">发送验证码</span>
                            <span class="time" v-else>
                                <span>从新发送</span>
                                <van-count-down :time="time" format="ss" @finish="isShow = true" />
                            </span>
                        </van-button>
                    </template>
                </van-field>
            </div>
            <van-button round id="btn" :disabled="nextState" @click="next">下一步</van-button>
        </div>
    </div>
</template>

<script>
// import { Notify } from "vant";
// import { SendVerificationCode, VerificationCode } from "../../https/loginApi";
import headerView from "../../components/headerView.vue";
export default {
    components: { headerView },
    data() {
        return {
            nextState: true,
            sms: "",
            number: "",
            isShow: true,
            time: 51000
        }
    },
    created() {
        let text = this.$route.params.number
        let len = text.length
        this.number = this.replacePos(text, len - 7, len - 5, '****')
    },
    methods: {
        next() {
            // VerificationCode(this.sms)
            // .then((res) => {
            //         console.log('验证码正确', res)
            //         this.$router.push('/SettingNewPwd')
            //     })
            //     .catch((err) => {
            //         console.log(err)
            //         Notify({ type: 'danger', message: '验证码错误' });
            //     })
            this.$router.push('/SettingNewPwd')
        },
        // 字符串替换
        replacePos(text, start, stop, replaceText) {
            let str = text.substr(0, start - 1) + replaceText + text.substr(stop + 1);
            return str;
        },
        // 发送验证码
        sendCode() {
            this.isShow = false
            // SendVerificationCode(this.number)
            //     .then((res) => {
            //         console.log('验证码发送成功', res)
            //         this.isShow = false
            //     })
            //     .catch((err) => {
            //         console.log(err)
            //     })
        },
        // 查看验证码是否正确
        getSms(){
            if (this.sms.length > 4) {
                this.nextState = false
            }
        }
    }
}
</script>

<style scoped>
.box {
    background-color: #f8fafc;
    color: #000;
}

.set_box {
    width: 80%;
    margin: 0 auto;
}

h3 {
    font-weight: 300;
}

.set_information p {
    font-size: 14px;
}
#btn {
    margin-top: 50px;
    width: 100%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 18px;
}
.time{
    color: #1d1c1c;
    font-size: 10px;
    display: flex;
    align-items: center;
}
.van-cell--center{
    padding: 0;
}
</style>